<template>
<div>
    <!--头部操作行开始-->
    <div class="form-top">
        <div class="form-top-left"></div>
        <!--右侧全局操作按钮-->
        <div class="form-top-right">
            <el-button-group>
                <el-button type="xingjian" icon="el-icon-plus" @click="BuildNew" v-if="_SHOWBTN('wzgl-sy-rqcode-xj')">新建</el-button>
            </el-button-group>
        </div>
    </div>
    <!--头部操作行结束-->
    <!--中间表格区域开始-->
    <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange" :border="true">
        <el-table-column type="index" label="序号" width="52" prop="number" align="center"></el-table-column>
        <el-table-column prop="name" label="二维码名称" width="546" align="center">
            <template slot-scope="scope">
                <el-input :disabled="scope.row.id !== editIndex" :autofocus="true" v-model="scope.row.name" placeholder="请输入内容" :class="[scope.row.id !== editIndex?'':'borderBlue']" @keyup.enter.native="EnterSubmit(scope.row)"></el-input>
            </template>
        </el-table-column>
        <el-table-column prop="rqcode" label="图片" show-overflow-tooltip width="546" align="center">
            <template slot-scope="scope">
                <span class="jia-pic">
                    <!--图片上传开始-->
                    <div class="upload-box">
                        <el-upload action list-type="picture-card" :file-list="fileList[scope.$index]" :auto-upload="false" :before-upload="beforeAvatarUpload" :on-change="function(file,fileList){return handleChange(file,fileList,scope.$index)}" :disabled="scope.row.id !== editIndex">
                            <i slot="default" class="el-icon-plus"></i>
                            <div slot="file" slot-scope="{file}">
                                <img class="el-upload-list__item-thumbnail" :src="file.url" alt />
                                <span class="el-upload-list__item-actions">
                                    <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                                        <i class="el-icon-zoom-in"></i>
                                    </span>
                                    <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file,scope.$index)">
                                        <i class="el-icon-delete"></i>
                                    </span>
                                </span>
                            </div>
                        </el-upload>
                        <el-dialog :visible.sync="dialogVisible">
                            <img width="100%" :src="dialogImageUrl" alt />
                        </el-dialog>
                    </div>
                    <!--图片上传结束-->
                </span>
            </template>
        </el-table-column>
        <el-table-column prop="sort" label="排序" show-overflow-tooltip width="174" align="center">
            <template slot-scope="scope">
                <span class="up" @click="up(scope.row.id)">
                    <img src="@/assets/image/up.png" alt />
                </span>
                <span class="down" @click="down(scope.row.id)">
                    <img src="@/assets/image/down.png" alt />
                </span>
            </template>
        </el-table-column>
        <el-table-column prop="operation" label="操作" show-overflow-tooltip width="223" align="center">
            <template slot-scope="scope">
                <el-button-group>
                    <div v-if="_SHOWBTN('wzgl-sy-rqcode-xg')">
                        <el-button type="bianji" @click="BianJi(scope.$index,scope.row)" v-if="scope.$index!==ischaice">编辑</el-button>
                        <el-button type="bianji" @click="save(scope.$index,scope.row)" v-else>保存</el-button>
                    </div>
                    <Single-deletion :clearOne="clearOne" :id="scope.row.id" :index="scope.$index" :clearOneID="clearOneID" showBetCode="wzgl-sy-rqcode-del"></Single-deletion>
                </el-button-group>
            </template>
        </el-table-column>
    </el-table>
    <div style="margin-top: 20px"></div>
    <!--中间表格区域结束-->
</div>
</template>

<script>
import Upload from "@/components/Upload/Upload";
import SingleDeletion from "@/components/Popup/SingleDeletion.vue";
export default {
    components: {
        Upload,
        SingleDeletion,
    },
    data() {
        //动态创建图片上传存储的数组根据id
        return {
            ischaice: -1,
            editIndex: -1,
            dialogTableVisible: false,
            dialogFormVisible: false,
            form: {
                name: "",
                region: "",
                date1: "",
                date2: "",
                delivery: false,
                type: [],
                resource: "",
                desc: "",
            },
            formLabelWidth: "120px",
            value: "",
            //表格数据,后台请求来的数据放进里面
            tableData: [],
            multipleSelection: [],
            //分页器
            currentPage4: 4,
            //输入框
            input: "",
            //日期选择器
            value1: "",
            value2: "",
            //图片上传
            dialogImageUrl: "",
            //控制图片是否课件
            dialogVisible: false,
            //控制按钮是否课件
            disabled: false,
            fileList: [
                [{
                    pic: "",
                }, ],
            ],
            paramsQr: {
                pageNum: 1,
                pageSize: 10,
            },
            //图片返回的地址
            picPace: "",
        };
    },
    created() {
        //   二维码调用
        this.GetQrCodeList();
    },
    methods: {
        //新建一个新的
        BuildNew(e) {
            this.editIndex = index;
            this.tableData.push({
                name: "",
                rqcode: "",
            });
            let index = this.tableData.length - 1;
            // console.log(index);
            this.ischaice = index;
            e.target.blur();
        },
        //删除的接口
        clearOne(id) {
            this.Api.getQrCodeClear({
                id: id,
            }).then((res) => {
                // console.log(res,111)
                this.GetQrCodeList();
            });
        },
        //没有id的删除
        clearOneID(index) {
            this.tableData.splice(index, 1);
        },
        //编辑按钮
        BianJi(index, row) {
            this.ischaice = index;
            this.editIndex = row.id;
        },
        //保存按钮
        save(index, row) {
            if (row.id !== undefined) {
                this.Api.getQrCodeBianji({
                    id: row.id,
                    name: row.name,
                    rqcode: this.fileList[index][0].url,
                }).then((res) => {
                    // console.log(res,1212)
                    if (res.code === "0") {
                        this.editIndex = -1;
                        this.ischaice = -1;
                        // console.log("msg")
                        this.GetQrCodeList();
                    }
                });
            } else {
                this.Api.getQrCodeBUild({
                    name: row.name,
                    rqcode: this.fileList[index][0].url,
                }).then((res) => {
                    console.log(res, 1212121);
                    if (res.code === "0") {
                        this.editIndex = -1;
                        this.ischaice = -1;
                        this.GetQrCodeList();
                    }
                });
            }
        },
        EnterSubmit() {},
        //调用二维码列表接口
        GetQrCodeList() {
            this.Api.getQrCodeList(this.paramsQr).then((res) => {
                this.tableData.length = 0;
                this.tableData = res.data.records;
                for (let i = 0; i < res.data.records.length; i++) {
                    this.fileList[i] = [{
                        url: res.data.records[i].rqcode,
                    }, ];
                }
                // console.log(this.fileList, 111);
            });
        },

        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        //箭头
        // 上移
        up(id) {
            //   console.log(id,1212)
            let ID = {
                id: id,
            };
            this.Api.getQrCodeUp(ID).then((res) => {
                // console.log(res,111)
                this.GetQrCodeList();
                // console.log("上");
            });
        },
        // 下移
        down(id) {
            let ID = {
                id: id,
            };
            this.Api.getQrCodeDowm(ID).then((res) => {
                // console.log(res,111)
                this.GetQrCodeList();
                // console.log("上");
            });
        },

        //图片上传代码区
        //图片上传的方法
        handleChange(file, fileList, index) {
            // console.log(file, fileList,"图片上传原保存地址");
            const isLt2M = file.size / 1200 / 1024 < 10;
            var FileExt = file.name.replace(/.+\./, "");
            if (!isLt2M) {
                this.$message.error("上传头像图片大小需小于10MB");
                this.fileList = []

            } else if (["jpg", "png", "jpeg"].indexOf(FileExt.toLowerCase()) === -1) {
                this.$message.error("请上传后缀名为jpg、png、jpeg的图片！");
                this.fileList = []
            } else {
                const formData = new FormData();
                //在file里面追加一个对象
                formData.append("file", file.raw);
                // console.log(formData,111)
                this.Api.uploadImage(formData).then((res) => {
                    // var data = { ...this.ruleForm, picUrl: res.data.url };
                    // console.log(data, 111);
                    // this.$emit("update:ruleForm", data);
                    // console.log(res,"tupian上传成功")
                    this.picPace = res.data.url;
                    this.fileList[index] = [{
                        url: this.$store.state.PortalManagement.fileIp + res.data.url,
                    }, ];
                    // console.log(this.fileList, "图片上传");
                });
            }

        },
        //图片移除，重新选取
        handleRemove(file, index) {
            // this.fileList[index] = [];
            this.$set(this.fileList, index, []);
            // this.fileList[index].splice(0, 1);
            // this.$forceUpdate()
            // console.log(this.fileList, index, "删除后的新数组");
            // console.log(this,"this指向")
        },
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            // console.log(this.dialogImageUrl, 111);
            this.dialogVisible = true;
        },
        //图片上传限定图片类型
        beforeAvatarUpload(file) {
            const isJPG = file.type === "png/jpeg/jpg";
            const isLt2M = file.size / 180 / 52 < 2;

            if (!isJPG) {
                this.$message.error("上传头像图片只能是png/jpeg/jpg格式!");
            }
            if (!isLt2M) {
                this.$message.error("上传头像图片大小约为180*52!");
            }
            return isJPG && isLt2M;
        },
    },
};
</script>

<style lang="less" scoped>
.form-top {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    margin-bottom: 21px;

    .form-top-left {
        display: flex;
        justify-content: start;
        align-items: center;
        margin-bottom: 21px;
    }
}

/deep/.el-input__inner {
    width: 154px;
    height: 36px;
    background: rgba(255, 255, 255, 1);
    border-radius: 3px;
    border: 1px solid rgba(230, 230, 230, 1);
}

/deep/.el-select {
    margin-right: 10px;
}

/deep/.el-button--primary {
    width: 52px;
    height: 36px;
    background: rgba(61, 127, 255, 1);
    border-radius: 3px;
    padding: 0;
}

/deep/.el-button--default {
    width: 52px;
    height: 36px;
    background: rgba(240, 242, 245, 1);
    border-radius: 3px;
    border: 1px solid rgba(215, 219, 224, 1);
    padding: 0;
}

/deep/.el-button--bianji {
    width: 60px;
    height: 28px;
    background: #3d7fff;
    border-radius: 3px;
    padding: 0;
    color: white;
    margin-right: 10px !important;
}

/deep/.el-button--shanchu {
    width: 60px;
    height: 28px;
    background: #fb363f;
    border-radius: 3px;
    border: 1px solid rgba(251, 54, 63, 1);
    padding: 0;
    color: white;
}

/deep/.el-button--xingjian {
    width: 80px;
    height: 36px;
    background: rgba(61, 127, 255, 1);
    border-radius: 3px;
    font-size: 14px;
    color: rgba(255, 255, 255, 1);
    padding: 0;
}

/deep/.el-table__header {
    background-color: #e8e8e8 !important;
}

/deep/.el-table_1_column_1 {
    width: 40px !important;
    height: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center;
}

/deep/.el-table {
    td {
        padding: 8px 0;
    }

    th {
        padding: 8px 0;
    }
}

/deep/.el-button--chakan {
    width: 60px;
    height: 28px;
    background: rgba(255, 255, 255, 1);
    border-radius: 4px;
    color: #333333;
    padding: 0;
    margin-right: 20px !important;
}

/deep/.el-button--shenghe {
    width: 60px;
    height: 28px;
    background: #f5a623;
    border-radius: 4px;
    color: white;
    padding: 0;
}

.fenye {
    margin-left: 730px;
}

/**改动 */
/deep/.el-input {
    width: 154px;
    margin-right: 20px;
}

/deep/.el-date-editor {
    position: relative;
}

/deep/.el-input__icon,
.el-icon-date {
    line-height: 35px;
    position: absolute;
    left: 120px;
}

.time-zhi {
    margin-right: 13px;
}

/deep/.el-table_10_column_67,
.is-leaf {
    /deep/.cell {
        padding-left: 35px;
    }
}

.jia-pic {
    display: inline-block;

    img {
        width: 104px;
        height: 30px;
    }
}

/deep/tbody {
    .el-table__row td:nth-child(3) {
        height: 86px;
        padding: 0 !important;

        .cell {
            height: 86px;
            padding-left: 20px;
            overflow: hidden;
            padding-top: 11px !important;
        }
    }
}

/deep/.has-gutter {
    /deep/tr {
        height: 46px;
    }
}

.up {
    cursor: pointer;
    margin-right: 20px;
}

.down {
    cursor: pointer;
}

//二维码图片上传
/deep/.el-upload--picture-card {
    width: 66px;
    height: 66px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/deep/.el-upload-list__item {
    width: 66px;
    height: 66px;
    margin-right: 0px;
}

/deep/.el-icon-zoom-in {
    font-size: 10px;
}

/deep/.el-icon-delete {
    font-size: 10px;
}

.upload-box {
    width: 66px;
    height: 66px;
    overflow: hidden;

    ul {
        li {
            div {
                >span {
                    display: flex;
                }
            }
        }
    }
}

/deep/.el-upload-list__item-actions {
    display: flex;
    justify-content: center;
    align-items: center;
}

.borderBlue {
    border: 1px solid rgba(61, 127, 255, 1);
    border-radius: 4px;
}

/deep/.el-dialog__body {
    img {
        width: 100%;
        height: 100%;
    }
}

/deep/.el-input {
    width: 400px;
    height: 35px;

    .el-input__inner {
        text-align: center;
        width: 398px;
        height: 33px;
        border-radius: 4px;
        // border: 1px solid rgba(221, 221, 221, 1);
        border: 0;
        color: #333333 !important;
        background-color: white;
    }
}

.el-button-group {
    display: flex;
    justify-content: center;
}
</style>
